<script setup name="soundRecording">
import { ref } from "vue";
import { useRouter } from "vue-router";
import { musicJson } from "@/utils/index";
import { useMyStore } from "../store/index";

const item = ref(musicJson);
const pageContent = useMyStore().pageContent;
const router = useRouter();
const currentActive = ref(0);
const releaseList = ref(["自动释放", "手动释放"]);
const handleSoundJson = (index) => {
  currentActive.value = index;
  item.releaseSettings = index;
};
const subSound = () => {
  pageContent.push(item.value);
  router.back(-1);
};
</script>
<template>
  <div class="sound">
    <div class="textField">
      <div class="select-box"><van-icon name="plus" />选择歌曲</div>
    </div>

    <div class="material-name no-transparency">
      <span>不透明度</span>
      <div class="slider">
        <van-slider
          max="1"
          min="0"
          step="0.01"
          v-model="item.volume"
          active-color="linear-gradient(90deg, #dffabc 0%, #87f4df 100%)"
        >
          <template #button>
            <div class="custom-button"></div>
          </template>
        </van-slider>
      </div>
    </div>
    <div class="sound-bottom">
      <div class="sound-left">释放设置</div>
      <div class="sound-right">
        <div
          v-for="(item, index) in releaseList"
          :key="index"
          :class="index == currentActive ? 'active' : ''"
          @click="handleSoundJson(index)"
        >
          {{ item }}
        </div>
      </div>
    </div>
    <div class="btn">
      <div @click="subSound">保存</div>
    </div>
  </div>
</template>
<style lang="less" scoped>
.active {
  background: linear-gradient(90deg, #dffabc 0%, #87f4df 100%) !important;
}

.custom-button {
  width: 34px;
  height: 34px;
  background: linear-gradient(90deg, #dffabc 0%, #87f4df 100%);
  border: 1px solid #ffffff;
  border-radius: 50%;
}
.material-name {
  margin-top: 22px;
  font-size: 26px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 90px;
  background: #ffffff;
  border-radius: 16px;

  :deep(.van-slider, ) {
    width: 201px;
  }
  :deep(.van-field) {
    padding: 0;
    width: 255px;
  }
  .slider {
    display: flex;
    align-items: center;
  }
}
.no-transparency {
  background-color: #f8f8f8;
}
.sound {
  padding: 30px;

  .textField {
    height: 280px;
    background: #f8f8f8;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    .select-box {
      width: 262px;
      height: 75px;
      border-radius: 16px;
      border: 1px dashed #979797;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #979797;
      font-size: 26px;
      .van-icon {
        margin-right: 16px;
      }
    }
  }

  .sound-bottom {
    margin-top: 22px;
    padding: 0 8px 0 20px;
    margin-bottom: 24px;
    min-height: 92px;
    background: #f8f8f8;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #333333;
    font-size: 26px;
    .sound-right {
      display: flex;
      div {
        width: 154px;
        height: 60px;
        margin-left: 26px;
        text-align: center;
        line-height: 60px;
        background: #ededed;
        border-radius: 16px;
      }
    }
  }
  .btn {
    display: flex;
    justify-content: center;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 10px;
    div {
      width: 690px;
      height: 90px;
      text-align: center;
      font-size: 28px;
      line-height: 90px;
      background: linear-gradient(90deg, #dffabc 0%, #87f4df 100%);
      border-radius: 16px;
    }
  }
}
</style>
